<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="购物车"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <div style="width: 100%; height: 50px"></div>

    <!-- 菜单栏 -->
    <van-checkbox-group v-model="selGoods">
      <van-row v-for="(shop, index) in result" :key="shop.id">
        <van-swipe-cell>
          <van-col span="2" class="leftbox">
            <van-checkbox :name="shop"></van-checkbox>
          </van-col>

          <van-col span="22">
            <van-card
              :price="shop.price"
              :title="shop.title"
              :thumb="shop.imgUrl"
              class="goods-card"
              @click-thumb="goDetail(shop.id)"
            >
              <template #num>
                <van-stepper v-model="shop.num" />
              </template>
            </van-card>
          </van-col>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              style="height: 104px"
              @click="delcard(index)"
            />
          </template>
        </van-swipe-cell>
      </van-row>
    </van-checkbox-group>
    <!-- 底部 -->
    <van-submit-bar :price="total" button-text="去结算" @submit="onSubmit">
      <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Shopping",
  components: {
    Tabbar,
  },
  data() {
    return {
      selAll: false,
      selGoods: [], //复选
      total: 0,
      dataList: [],
      id: this.$route.params.id,
      logo: "",
      count: this.$route.params.num,
      countAdd: 0,
    };
  },
  mounted() {
    this.getShoppingById(this.id);
    // this.getCount();
  },

  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onSubmit() {},

    checkAll() {
      if (this.selAll) {
        this.selGoods = this.dataList;
      } else {
        this.selGoods = [];
      }
    },

    delcard(index) {
      const data = {
        isInCar: false,
      };
      this.$dialog
        .confirm({
          message: `您确定要删除${this.dataList[index].title}吗?`,
        })
        .then(() => {
          console.log(this.dataList[index].isInCar);
          this.$axios
            .patch("/buyList/" + this.dataList[index].id, data)
            .then((res) => {
              if (res.statusText == "OK") {
                this.$toast("删除成功");
              } else {
                console.log("出错了！");
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.result.splice(index, 1);

          let i = this.selGoods.indexOf(index);
          if (i != -1) {
            this.selGoods.splice(i, 1);
          }
        })
        .catch(() => {});
    },


    getShoppingById(id) {
      let _this = this;
      this.$axios
        .get("/buyList")
        .then((res) => {
          if (res.statusText == "OK") {
            let a = res.data;
            a.filter((shop) => {
              if (shop.isInCar) {
                _this.dataList.push(shop);
              }
            });
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goDetail(id) {
      this.$router.push({
        path: "/details/" + id,
      });
    },
  },

  computed: {
    result() {
      let a = this.dataList;
      return a;
    },
  },

  watch: {
    selGoods: {
      handler(arr) {
        this.total = 0;
        arr.forEach((shop) => {
          // console.log(item.num*item.price)
          this.total += shop.num * shop.price * 100;
        });
        if (arr.length === this.dataList.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
      },
      deep: true,
    },
  },
};
</script>


<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-row {
  margin: 10px 0px;
}
.leftbox {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-icon {
  color: gray;
}
</style>

